<template>
  <section class="others-page">
    <ul>
      <!-- <template v-for="(item, index) in list">
        <li :key="item+index" v-if="item % 5">{{ item }}</li>
      </template> -->
      <li v-for="(item, index) in renderList" :key="item+index">{{ item }}</li>
    </ul>
    <el-button @click="showC1 = !showC1">C1 toggle</el-button>
    <!-- <C1 v-if="showC1" @click2="say" /> -->
    <keep-alive>
      <C1 v-if="showC1" data="24" v-bind="$attrs" @click1="say" />
    </keep-alive>

    <!-- fade out-right -->
    <transition name="out-right">
      <p v-if="showC1">C1 transition</p>
    </transition>
    <p ref="pp">1234</p>
    <p>{{ num | dataF }}</p>

    <!-- <div v-pre>{{ zjkljekljlkjklj }}</div> -->
  </section>
</template>
<script>
import C1 from './components/C1'
export default {
  components: {
    C1
  },
  data () {
    return {
      list: [],
      time: 0,
      showC1: true,
      num: 1000
    }
  },
  filters: {
    dataF: function (v) {
      return '--'+v
    }
  },
  computed: {
    renderList () {
      return this.list.filter(v => v % 5)
    }
  },
  created () {
    for (let i = 0; i < 10; i++) {
      this.list.push(i)
    }
    this.time = new Date().getTime()
    console.log('Index created')
  },
  mounted () {
    // this.$nextTick(() => {
    //   let timeRendered = new Date().getTime()
    //   console.log('used: ', timeRendered - this.time)
    // })
    console.log('Index mounted')
    // this.$children[1].run(6)
    // this.$refs.pp.innerHTML = '5678'
    // console.log(this.$refs.pp)
  },
  beforeDestroy () {
    console.log('Index beforeDestroy')
  },
  destroyed () {
    console.log('Index destroyed')
  },
  methods: {
    say (word = 'world') {
      console.log('hello ', word)
    }
  }
}
</script>
<style lang="less" scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}


.out-right-enter-active,
.out-right-leave-active {
  transition: transform 1s;
}
.out-right-enter,
.out-right-leave-to {
  transform: translate3d(100%, 0, 0);
}
</style>
